.fadeIn-enter-active{
  transition: opacity 0.8s ease;
}
.fadeIn-enter {
  opacity: 0;
}

// 小球的过渡
.bounce-enter-active {
  animation: ballin 0.6s;
}
.bounce-leave-active {
  animation: ballout 0.4s;
}

// 收藏过渡
.collection-right-enter-active, .collection-right-leave-active,
.collection-left-enter-active, .collection-left-leave-active {
  position: fixed;
  transition: transform 0.8s linear;
  height: 100vh;
  overflow: hidden;
}
.collection-right-leave-active,
.collection-left-enter {
  transform: translateX(100vw)
}
.collection-right-enter,
.collection-left-leave-active {
  transform: translateX(-100vw)
}

// 页面过度
.content-right-enter-to, .content-left-leave-to {
  transition: transform 0.8s ease;
  position: fixed;
  height: 100vh;
  overflow: hidden;
  z-index: 10000;
  background: #fff;
}
.content-right-enter, .content-left-leave-to {
  transform: translateX(-100vw);
}
.content-right-leave-to {
  transition: opacity 0.8s linear;
  position: fixed;
  z-index: 0;
  opacity: 0;
}
.content-left-enter-to {
  transition: opacity 0.8s linear;
  position: relative;
  z-index: 0;
}
.content-left-enter {
  opacity: 0;
}

// 历史
.slide-enter-to, .slide-leave-to {
  transition: height 0.2s linear;
}
.slide-enter, .slide-leave-to {
  height: 0;
}
.slide-enter-to, .slide-leave {
  height: px2rem(300px)
}

@keyframes ballin {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  40% {
    transform: translateY(-1 * px2rem(50px));
  }
  70% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(-1 * px2rem(30px));
  }
  100% {
    transform: translateY(0)
  }
}
@keyframes ballout {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(100px);
    opacity: 0;
  }
}

